<template>
  <div id="index">
    <div class="app-container" id="container">

      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">基本信息设置</em>
          </div>

          <el-form-item label="活动类型" prop="activityType">
            <el-radio-group disabled v-model="form.activityType">
              <el-radio label="new">新人购</el-radio>
              <el-radio label="limitTime">限时购</el-radio>
              <el-radio label="seckill">秒杀</el-radio>
            </el-radio-group>
          </el-form-item>


          <el-form-item label="商品类型" prop="shopType">
            <el-radio-group disabled v-model="form.shopType" @change="shopTypeFun">
              <el-radio style="display: block;margin: 4px;" label="service">服务项目</el-radio>
              <el-radio style="display: block;margin: 4px;" label="card">套餐卡</el-radio>
              <el-radio style="margin: 4px;" label="coupon">优惠券</el-radio>
            </el-radio-group>
          </el-form-item>
          <div>
            <!-- 选择服务项目 -->
            <div v-if="form.shopType == 'service'">
              <div style="margin: 10px;">
                <selected ref="childStore" :canDelete="false" style="margin-top: 10px;" v-if="Object.keys(this.selectedDataStore).length>0"
                  :selectedData="selectedDataStore" @tabRespon="tabRespon">
                </selected>
              </div>
            </div>
            <!-- 选择优惠券 -->
            <div v-if="form.shopType == 'coupon'">
              <div style="margin: 10px;">
                <selectedCoupon :canDelete="false" ref="childCoupon" style="margin-top: 10px;"
                  v-if="Object.keys(this.selectedDataCoupon).length>0" :selectedData="selectedDataCoupon"
                  @tabRespon="tabResponCoupon">
                </selectedCoupon>
              </div>
            </div>
          </div>

          <el-form-item label="是否限定" prop="isLimit">
            <el-radio-group disabled v-model="form.isLimit">
              <el-radio label="0">不限量</el-radio>
              <el-radio label="1">限量</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="库存数量" prop="isLimit" v-if="form.isLimit == 1">
            {{form.activityStock}}
          </el-form-item>


        </div>



        <div class="product-div-two">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">时间设置</em>
          </div>


          <el-form-item label="活动时间" prop="time">

            {{form.startTime}} -{{form.endTime}}

          </el-form-item>

          <el-form-item label="是否重复开启" prop="weekDay">
            {{form.weekDay}}
          </el-form-item>



          <el-form-item label="整点时间" prop="startHourStr">
            {{form.startHourStr}}
          </el-form-item>




        </div>



      </el-form>
      <div class="dw">
        <el-button @click="colsePro" style="margin-top: 10px;margin-left: 40%;">返回</el-button>
      </div>
    </div>

    <commodityCoupon v-if="couponOpen" @toCloseBox="toCloseBoxCoupon" @multipleSelection="multipleSelectionCoupon"
      :flag="couponOpen" :source="false" ref="selTableCoupon"></commodityCoupon>

    <commodityItem v-if="storeOpen" @toCloseBox="toCloseBox" @multipleSelection="multipleSelection" :flag="storeOpen"
      :source="false" ref="selTable"></commodityItem>



  </div>
</template>
<script>


import { getActivityVoById, addActivity, editActivity } from "@/api/service/activity"
import selected from "@/components/radio/SelectedItem";
import commodityItem from "@/components/radio/commodityItem";

import selectedCoupon from "@/components/radio/SelectedCoupon";
import commodityCoupon from "@/components/radio/commodityCoupon";

export default {
  components: {
    selected,
    commodityItem,
    selectedCoupon,
    commodityCoupon,

  },
  data() {
    return {
      storeOpen: false,
      selectedDataStore: {},
      couponOpen: false,
      selectedDataCoupon: {},
      form: {
        activityType: 'new',
        shopType: 'service',
        isLimit: '0',
      },
      rules: {
        time: [{
          required: true,
          message: "活动时间不能为空",
          trigger: "blur"
        }],
        startHourStr: [{
          required: true,
          message: "整点开始不能为空",
          trigger: "blur"
        }],
      },
      storeInFoOptions: [
        { name: '秒杀', value: 'seckill' },
        { name: '限时购', value: 'limittime' },
        { name: '新人购', value: 'new' }
      ],
      options: [
        { lable: '星期一', value: '星期一' },
        { lable: '星期二', value: '星期二' },
        { lable: '星期三', value: '星期三' },
        { lable: '星期四', value: '星期四' },
        { lable: '星期五', value: '星期五' },
        { lable: '星期六', value: '星期六' },
        { lable: '星期日', value: '星期日' }
      ],
      mesList: []
    }
  },
  created() {
    const activityId = this.$route.params && this.$route.params.activityId;
    if (activityId) {
      getActivityVoById(activityId).then(response => {
        this.form = JSON.parse(JSON.stringify(response.data));
        this.form.time = [];
        this.form.time.push(this.form.startTime)
        this.form.time.push(this.form.endTime)
        if (this.form.shopType == 'service') {
          this.selectedDataStore = this.form.item;
          setTimeout(() => {
            this.$refs.childStore.getList();
          }, 5);
        } else if (this.form.shopType == 'coupon') {
          this.selectedDataCoupon = this.form.couponInfo;
          setTimeout(() => {
            this.$refs.childCoupon.getList();
          }, 5);
        }
      })
    }

  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      console.log(this.form)
      this.$refs["form"].validate(valid => {
        this.form.startTime = this.form.time[0]
        this.form.endTime = this.form.time[1]
        this.form.item = this.selectedDataStore;
        this.form.couponInfo = this.selectedDataCoupon;
        if (valid) {
          const activityId = this.$route.params && this.$route.params.activityId;
          if (activityId) {
            editActivity(this.form).then(respone => {
              this.msgSuccess("修改成功");
              this.colsePro();
            })
          } else {
            addActivity(this.form).then(respone => {
              this.msgSuccess("添加成功");
              this.colsePro();
            })
          }
        }
      });
    },
    shopTypeFun() {
      if (this.form.shopType == 'service') {
        this.selectedDataCoupon = {};
        this.$forceUpdate()
        // this.$nextTick(() => {
        //   this.$refs.childCoupon.getList();
        // });
      } else if (this.form.shopType == 'coupon') {
        this.selectedDataStore = {};
        this.$forceUpdate()
        // this.$nextTick(() => {
        //   this.$refs.childStore.getList();
        // });
      }
    },
    //优惠券
    selectCommodityCoupon() {
      this.$forceUpdate()
      this.couponOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableCoupon"].greet(this.selectedDataCoupon);
      });
    },
    multipleSelectionCoupon(data) {
      this.couponOpen = false
      this.selectedDataCoupon = data;
      this.$nextTick(() => {
        this.$refs.childCoupon.getList();
      });
    },
    toCloseBoxCoupon() {
      this.couponOpen = false;
    },
    tabResponCoupon() {
      this.selectedDataCoupon = {};
    },
    //门店
    tabRespon() {
      this.selectedDataStore = {};
    },
    selectCommodity() {
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataStore);
      });
    },
    multipleSelection(data) {

      this.storeOpen = false
      this.selectedDataStore = data;
      this.$nextTick(() => {
        this.$refs.childStore.getList();
      });
    },
    toCloseBox() {
      this.storeOpen = false;
    },
    colsePro() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/activity",
        query: {
          t: Date.now()
        }
      });
    },
  }
}
</script>


<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #FFF;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}
</style >
